<template>
  <view class="primers-c">
    <view class="primers-c">
      <view class="pot">
        <!-- 顶部选项卡 -->
        <text class="select-title">{{ $t("primers.ChooseSoupBase") }}</text>
        <view class="select-soup">
          <view
            class="select-soup-item-l"
            @click="soupListCurrentFun(1)"
            :class="
              primetrs.soupListCurrent == 1
                ? 'select-soup-item-y'
                : 'select-soup-item-n'
            "
            >{{ $t("primers.SinglePot") }}</view
          >
          <view
            class="select-soup-item-r"
            @click="soupListCurrentFun(0)"
            :class="
              primetrs.soupListCurrent == 0
                ? 'select-soup-item-y'
                : 'select-soup-item-n'
            "
            >{{ $t("primers.doubleCauldron") }}</view
          >
        </view>
        <!-- 锅底 -->
        <view class="soup-content">
          <u-transition
            mode="fade"
            :show="primetrs.soupListCurrent == 1"
            :duration="1000"
          >
            <view
              class="soup-vie animate__animated"
              :class="
                primetrs.soupListCurrent == 1
                  ? 'animate__backInRight'
                  : 'animate__backOutLeft'
              "
            >
              <view class="soup-img-dan">
                <image
                  class="fill-item-image"
                  v-if="primetrs.imageInfo1"
                  :src="primetrs.imageInfo1.url"
                  @click="delImageFun(1)"
                  mode="aspectFill"
                />
                <text class="Please_select" v-else>{{
                  $t("primers.PleaseSelect")
                }}</text>
              </view>
              <view class="taste-name" v-if="primetrs.imageInfo1">
                {{ combineNameOne || "--" }}
              </view>
            </view>
          </u-transition>
          <u-transition
            mode="fade"
            :show="primetrs.soupListCurrent == 0"
            :duration="1000"
          >
            <view
              class="soup-vie animate__animated"
              :class="
                primetrs.soupListCurrent == 0
                  ? 'animate__backInRight'
                  : 'animate__backOutLeft'
              "
            >
              <view class="soup-img">
                <view class="fill">
                  <view class="fill-item">
                    <image
                      class="fill-item-image"
                      v-if="primetrs.imageInfo1"
                      :src="primetrs.imageInfo1.url"
                      @click="delImageFun(1)"
                      mode="aspectFill"
                    >
                    </image>
                    <text class="Please_select" v-else>{{
                      $t("primers.PleaseSelect")
                    }}</text>
                  </view>
                  <view class="fill-item">
                    <image
                      class="fill-item-image2"
                      v-if="primetrs.imageInfo2"
                      :src="primetrs.imageInfo2.url"
                      @click="delImageFun(2)"
                      mode="aspectFill"
                    >
                    </image>
                    <text class="Please_select" v-else>{{
                      $t("primers.PleaseSelect")
                    }}</text>
                  </view>
                </view>
              </view>
              <view class="soup-img-name" v-if="primetrs.imageInfo1">
                <view class="soup-img-name-cont">
                  {{combineNameOne != undefined && combineNameTow != undefined?combineNameOne + combineNameTow  : '--' }}
                </view>
                <!-- <text class="soup-img-name-t">{{primetrs.imageInfo1.taste || '--'}}</text> -->
                <!-- <view class="name-item-add">
									<text class="name-item">+</text>
									<text class="name-item">上素香菇锅</text>
								</view> -->
              </view>
            </view>
          </u-transition>
        </view>
      </view>
      <!-- 右边 -->
      <view class="primers-menu">
        <text class="SoupBase-name">{{ $t("primers.SoupBase") }}</text>
        <scroll-view
          class="soupList-src-v"
          scroll-y="true"
          style="margin-top: 24px"
        >
          <view class="" v-for="(item, index) in menuList" :key="index">
            <u-transition mode="fade" :show="true" :duration="1000">
              <soupList :itemData="item" :itemIndex="index" />
            </u-transition>
          </view>
          <view style="width: 100%; height: 120px"></view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import soupList from "@/components/soupList.vue";
import { addDish } from "@/common/config/api.js";
export default {
  name: "prIMERS",
  props: {
    curIndex: Number,
    menuList: Array,
    primetrs: Object,
  },
  components: {
    soupList,
  },
  data() {
    return {
      soupListCurrent: 0,
      ImageUrl1: null,
      ImageUrl2: null,
    };
  },
  watch:{
	   primetrs: {
	           handler(newVal) {
	              console.log('newVal',newVal)
	           },
	           deep: true
	       }
  },
  computed: {
    combineNameOne() {
      return (
        this.primetrs.imageInfo1.showName +
        this.primetrs.imageInfo1.showFlavorName
      );
    },
    combineNameTow() {
      return (
        this.primetrs.imageInfo2.showName +
        this.primetrs.imageInfo2.showFlavorName
      );
    },
  },
  methods: {
    // 回首页改变
    soupListCurrentFun(e) {
      if (this.primetrs.imageInfo1 || this.primetrs.imageInfo2) {
        this.showAlert(this.$t("showToast.switch")).then(async (res) => {
          if (this.primetrs.imageInfo1) {
            await this.addDishFun(this.primetrs.imageInfo1);
          }
          if (this.primetrs.imageInfo2) {
            await this.addDishFun(this.primetrs.imageInfo2);
          }
          this.bus.$emit("TypePotBottom", e);
        });
      } else {
        this.bus.$emit("TypePotBottom", e);
      }
    },
    addDishFun(e) {
      console.log("切换删除", e);
      return new Promise((resolve, reject) => {
        addDish({
          dishId: e.dishId, //菜品id
          dishMoney: e.dishMoney, //菜品的单价
          actuallyMoney: e.actuallyMoney, //实际应收金额
          dishFlavorIds: e.dishFlavorIds, //菜品口味关联id
          deskId: this.getDeskId(), //桌位id
          num: 0,
        })
          .then((res) => {
            resolve();
          })
          .catch(() => {
            reject();
          });
      });
    },
    // SelectTheSoupBase() {
    // 	// console.log('选中了锅底')
    // 	// if (this.ImageUrl1) {
    // 	// 	this.ImageUrl1 = 'https://upload-images.jianshu.io/upload_images/23088497-706e2fe96245aca4.png'
    // 	// } else if (this.ImageUrl2) {
    // 	// 	this.ImageUrl1 = 'https://upload-images.jianshu.io/upload_images/23088497-706e2fe96245aca4.png'
    // 	// }
    // },
    // 删除
    delImageFun(e, i) {
      this.bus.$emit("TypePotBottomDel", e);
    },
  },
};
</script>

<style scoped lang="scss">
.primers-c {
  display: flex;
  flex: 1;
}

.pot {
  display: flex;
  flex: 1;
  flex-direction: column;
  // justify-content: center;
  color: $uni-text-color;
  padding: 16px 0;
  align-items: center;
  box-sizing: border-box;
  height: auto;
}

.primers-menu {
  width: 340px;
  display: flex;
  background: $qy-bg-nav-option-color;
  padding: 16px 24px;
  box-sizing: border-box;
  z-index: 2;
  flex-direction: column;

  .SoupBase-name {
    color: $qy-text-color-title;
    font-size: 20px;
  }
}

.select-title {
  color: $qy-text-color-title;
  font-size: 20px;
}

// .select-guo{
// 	width: 100%;
// 	display: flex;
// 	flex-direction: column;
// 	align-items: center;
// }

.select-soup {
  margin-top: 30px;
  display: flex;
  height: 50px;
}

.select-soup-item-l {
  border-radius: 10px 0px 0px 10px;
  width: 120px;
  height: 54px;
  background: $qy-bg-nav-option-color;
  display: flex;
  align-items: center;
  justify-content: center;
}

.select-soup-item-r {
  border-radius: 0px 10px 10px 0px;
  width: 120px;
  height: 54px;
  // background: $qy-bg-nav-option-color;
  display: flex;
  align-items: center;
  justify-content: center;
}

.select-soup-item-y {
  background: $uni-text-color-zbt-f;
  color: $uni-text-color;
}

.select-soup-item-n {
  background: $qy-bg-nav-option-color;
  color: $uni-text-color-inverse;
}

.soup-vie {
  display: flex;
  // flex: 1;
  justify-content: center;
  position: absolute;
  width: 100%;
}

.soup-content {
  // margin-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;

  .soup-img {
    position: absolute;
    width: 30vw;
    height: 47vh;
    background-image: url("../../static/nav/soup/Group.png");
    background-size: 90%;
    background-repeat: no-repeat;
    margin-top: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center center;
  }

  .soup-img-dan {
    position: absolute;
    width: 30vw;
    height: 47vh;
    margin-top: 41px;
    background-image: url("../../static/nav/soup/Group.png");
    background-size: 90%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center center;

    .fill-item-image {
      width: 79%;
      height: 85%;
      border-radius: 50%;
    }
  }
}

.soup-img-name {
  font-size: 16px;
  color: $uni-text-color;
  margin-top: 452px;
  display: flex;
  flex-direction: row;

  .soup-img-name-cont {
    text-align: center;
    width: 100vw;
  }

  // align-items: center;
  // flex: 1;
  // width: 110px;
  // width: 100vw;
  // position: absolute;

  // .name-item-add {
  // 	display: flex;
  // 	flex-direction: column;
  // 	align-items: center;
  // }

  // .name-item {
  // 	margin-top: 10px;
  // }
}

.soupList-src-v {
  display: flex;
  height: 80vh;

  // padding-bottom: 100px;
  // box-sizing: border-box;

  // flex: 1;
  // background-color: red;
}

.fill {
  display: flex;
  flex-direction: row;
  width: 79%;
  height: 85%;
  position: relative;
  background-image: url("../../static/nav/soup/shuang.png");
  background-size: 100%;
  background-repeat: no-repeat;

  .fill-item {
    flex: 1;
    display: flex;
    // align-items: center;
    justify-content: center;
    // z-index: 1;
    align-items: center;

    .fill-item-image {
      width: 100%;
      height: 100%;
      // border-radius: 300% 0px 0px 300%;
      border-radius: 200px 0 0 200px;
      // overflow: hidden;
    }

    .fill-item-image2 {
		width: 100%;
      height: 100%;
      // border-radius: 300% 0px 0px 300%;
      border-radius: 200px 0 0 200px;
      // overflow: hidden;
      // margin-left: -30px;
      transform: rotate(180deg);
    }
  }
}

.Please_select {
  color: $uni-text-color-inverse;
  font-size: 18px;
}

.taste-name {
  
  position: absolute;
  text-align: center;
  margin-top: 60vh;
  width: 30vw;

  // width: 100vw;
}
</style>